<template>

<div class="piclist">
  <div class="list-main">
    <div class="list-item" v-for="(item,index) in piclist" :key="index">


      <el-card class="box-card">
<!--       卡片的主体-->
        <div>
          <img :src="urlStr(item)" alt="">
          <div class="text">
            <div class="left">
              <div @click="edit(item.id)" v-if="item.id !== tempId">
                标题:{{item.title == null?"未命名":item.title}}
              </div>
              <div v-else>
                <div>
                  <el-input v-focus @blur="lose" ref="input" class="inp" @change="upnewTitle" v-model="newtitle" placeholder="输入新标题"></el-input>
                </div>
              </div>

            </div>
            <div class="right">
              <el-button type="danger" size="small" @click="del((item.id))" class="del">删除</el-button>
            </div>
          </div>
        </div>


      </el-card>
    </div>
    <page-nation :total="totals" @changepage = "changepage"></page-nation>

  </div>
</div>
</template>

<script>
//引入分页
import PageNation from '@/views/material/picture/pagnation/index'

import pictureapi from '@/api/material/pictureapi'
import host from '@/settings'
//自定义指令

export default {
name: "PictureList",
  components:{
  PageNation
  },
  props:['ti'],
data(){
return{
  piclist:[],
  showtitle:null,
  tempId:null,
  newtitle:"",
  start:1,
  // 总页数
  totals:1
}

},
methods:{
  // 获取图片列表
  getList(){
  pictureapi.getList({
    start:this.start,
    limit:10,
    title:this.ti
  })
    .then(res=>{
      console.log(res)
      this.piclist=res.data.list
      this.totals = res.data.totalRow
    })
  },
  // 更改标题
  edit(id){
  this.tempId = id

  },
  //更新标题并刷新列表
  upnewTitle(val){
    console.log(val)
    this.newtitle = val
    console.log(this.tempId)
    pictureapi.updataTitle({
      id:this.tempId,
      title:val

    })
    .then(res=>{
      console.log(res)
      this.newtitle="";
      this.tempId=null;
      this.getList()


    })

  },
  // 失去焦点
  lose(){
    this.tempId=null;

  },
  //删除图片
  del(id){
    console.log()
    pictureapi.delMater({
      id:id
    })
    .then(res=>{
      console.log(res)
     if (res.code == 'success'){
       this.$message('删除成功')
       this.getList()
     }
    })
  },
  changepage(val){
    console.log(val)
    this.start=val;
    this.getList()
  }
  //点击分页来获取不同的数据
  // handleCurrentChange(val) {
  //   console.log(`当前页: ${val}`);
  // this.start=val;
  // this.getList()
  // }
},
  directives: {
    focus: {
      // 指令的定义
      // 1. 指令是在 dom元素插入页面后触发的,而且这个事件(focus)比较特殊,同时只能在一个标签执行
      // 2. 执行的元素必须是原生的dom元素
      // 注意: vue项目 并不适合做dom操作,在某些特殊形况下,可以使用少量的dom操作.
      // 但是如果遇到复杂的场景,需要大量操作dom元素,建议把dom元素的操作放到 "自定义指令" 中实现.
      inserted: function (el) {
        console.log(el);
        var taget = el.children[0];
        taget.focus()
      }
    }
  },
  computed:{
    urlStr(){
   return  function (str){
     return host.host+'/'+str.dir+'/'+str.fileName;
      }

    }
  },
  created(){
  this.getList()

  }
}
</script>

<style lang="scss" scoped>
.piclist{
  width: 100%;
  .list-main{
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .list-item{
      width: 18%;

      img{
        width: 100%;
        height: 240px;
        margin-bottom: 10px;
      }
      .text{
        display: flex;
        justify-content: space-around;

        .left{
          width: 60%;
          text-align: center;
          height: 30px;
          line-height: 30px;
         ::v-deep .el-input__inner{
            height: 30px;
          }
        }
        .right{
          display: flex;

          .del{

          }
        }
      }
    }
    .pagation{
      display: flex;
      margin:30px auto;

    }
  }
}
</style>
